Google Charts API-তে চার্টের title, legend, axis, এবং gridlines কাস্টমাইজ করার জন্য বিভিন্ন অপশন এবং স্টাইল ব্যবহার করা হয়। এগুলি ব্যবহার করে আপনি চার্টের উপস্থাপনাকে সম্পূর্ণ কাস্টমাইজ করতে পারেন। এখানে বিস্তারিতভাবে আলোচনা করা হলো।

1. Title কাস্টমাইজেশন

চার্টের টাইটেল title অপশন দিয়ে কাস্টমাইজ করা হয়। এর মাধ্যমে আপনি টাইটেলের টেক্সট, ফন্ট সাইজ, রঙ, স্টাইল এবং পজিশন পরিবর্তন করতে পারেন।

Title কাস্টমাইজ করতে:

• title: টাইটেলের টেক্সট।
• titleTextStyle: টাইটেল টেক্সটের স্টাইল (যেমন ফন্ট সাইজ, ফন্ট কালার, ইত্যাদি)।

chartOptions = {
  title: 'My Daily Activities',  // Title text
  titleTextStyle: {
    color: 'blue',  // Title text color
    fontSize: 18,   // Font size
    bold: true,     // Make the title bold
    italic: true    // Make the title italic
  }
};

2. Legend কাস্টমাইজেশন

Legend চার্টের লেজেন্ড কাস্টমাইজ করতে ব্যবহার করা হয়। এর মাধ্যমে আপনি লেজেন্ডের পজিশন, টেক্সট স্টাইল, এবং রঙ পরিবর্তন করতে পারেন।

Legend কাস্টমাইজ করতে:

• position: লেজেন্ডের পজিশন (top, bottom, left, right)।
• alignment: লেজেন্ডের এলাইনমেন্ট (start, center, end)।
• textStyle: লেজেন্ডের টেক্সট স্টাইল কাস্টমাইজ করা (রঙ, ফন্ট সাইজ, ইত্যাদি)।

chartOptions = {
  legend: {
    position: 'top', // Legend position: top, bottom, left, right
    alignment: 'center', // Legend alignment: start, center, end
    textStyle: {
      color: 'black', // Legend text color
      fontSize: 14,  // Legend font size
      fontName: 'Arial' // Legend font family
    }
  }
};

3. Axis কাস্টমাইজেশন

hAxis (horizontal axis) এবং vAxis (vertical axis) কাস্টমাইজ করে আপনি অক্ষের টাইটেল, লেবেল এবং অন্যান্য উপাদান কাস্টমাইজ করতে পারেন। এছাড়া, আপনি axis gridlines ও কাস্টমাইজ করতে পারবেন।

Horizontal axis (hAxis) এবং Vertical axis (vAxis) কাস্টমাইজ:

• title: অক্ষের টাইটেল।
• minValue: অক্ষের মিনিমাম মান।
• textStyle: অক্ষের টেক্সট স্টাইল (রঙ, সাইজ, ফন্ট, ইত্যাদি)।
• gridlines: গ্রিডলাইনের কাস্টমাইজেশন।

chartOptions = {
  hAxis: {
    title: 'Time',  // Horizontal axis title
    minValue: 0,    // Minimum value for horizontal axis
    textStyle: {
      color: 'green', // Axis text color
      fontSize: 12    // Axis text font size
    },
    gridlines: {
      color: 'lightgrey',  // Gridlines color
      count: 5             // Number of gridlines
    }
  },
  vAxis: {
    title: 'Sales',  // Vertical axis title
    textStyle: {
      color: 'red',    // Axis text color
      fontSize: 14     // Axis text font size
    },
    gridlines: {
      color: 'lightgrey', // Gridlines color for vertical axis
      count: 4            // Number of gridlines
    }
  }
};

4. Gridlines কাস্টমাইজেশন

Gridlines চার্টের গ্রিডলাইনগুলোর কাস্টমাইজেশন করতে ব্যবহৃত হয়। আপনি গ্রিডলাইনের রঙ, সাইজ, এবং সংখ্যা কাস্টমাইজ করতে পারেন। এটি অক্ষের মাধ্যমে চার্টের উপস্থাপনাকে পরিষ্কার এবং আরও দেখতে সুন্দর করে তোলে।

Gridlines কাস্টমাইজ করতে:

• color: গ্রিডলাইনের রঙ।
• count: গ্রিডলাইনের সংখ্যা (যতটা কম হবে, ততটা বড় হবে)।
• width: গ্রিডলাইনের প্রস্থ।

chartOptions = {
  hAxis: {
    gridlines: {
      color: 'lightgrey',  // Gridlines color
      count: 5,            // Number of gridlines
      width: 1             // Gridlines width
    }
  },
  vAxis: {
    gridlines: {
      color: 'lightgrey',  // Gridlines color for vertical axis
      count: 4,            // Number of gridlines
      width: 1             // Gridlines width
    }
  }
};

Complete Example (Pie Chart with Title, Legend, Axis, and Gridlines)

এখানে একটি Pie Chart এর উদাহরণ দেওয়া হলো যেখানে Title, Legend, Axis, এবং Gridlines কাস্টমাইজ করা হয়েছে।

app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Google Charts - Customization Example';

  // Chart Type
  chartType = 'PieChart';

  // Chart Data
  chartData = [
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ];

  // Chart Options
  chartOptions = {
    title: 'My Daily Activities',
    titleTextStyle: {
      color: 'blue',
      fontSize: 18,
      bold: true,
      italic: true
    },
    pieHole: 0.4, // Doughnut style
    width: 600,
    height: 400,
    colors: ['#FF5733', '#33FF57', '#3357FF'],
    legend: {
      position: 'top',
      alignment: 'center',
      textStyle: {
        color: 'black',
        fontSize: 14
      }
    },
    tooltip: {
      trigger: 'focus',
      isHtml: true,
      textStyle: {
        color: 'black',
        fontSize: 14
      }
    },
    hAxis: {
      title: 'Time',
      minValue: 0,
      textStyle: {
        color: 'green',
        fontSize: 12
      },
      gridlines: {
        color: 'lightgrey',
        count: 5
      }
    },
    vAxis: {
      title: 'Activities',
      textStyle: {
        color: 'red',
        fontSize: 14
      },
      gridlines: {
        color: 'lightgrey',
        count: 4
      }
    }
  };
}

app.component.html:

<h1>{{ title }}</h1>

<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

সারাংশ

Google Charts API-তে title, legend, axis, এবং gridlines কাস্টমাইজেশন এর মাধ্যমে আপনি আপনার চার্টের উপস্থাপনাকে সম্পূর্ণভাবে কাস্টমাইজ করতে পারেন। এই কাস্টমাইজেশনগুলি আপনাকে আপনার চার্টের স্টাইল এবং লেআউট নিয়ন্ত্রণে সহায়তা করে, যাতে তা আরও সুন্দর, পাঠযোগ্য এবং ইন্টারঅ্যাকটিভ হয়। Title, Legend, Axis, এবং Gridlines এর মাধ্যমে আপনি চার্টের বিভিন্ন অংশের আঙ্গিক এবং রঙ নির্ধারণ করতে পারেন।